import React, { Component } from 'react';
import { View, Dialog, Pin, Button, Text, ProgressCircle } from 'react-desktop/macOs';

class PinDialog extends Component {
  constructor() {
    super();
    this.state = {
      pin: '',
      error: null,
      loading: false
    };
  }

  submit = () => {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, error: 'The confirmation code you entered is incorrect.' });
    }, 1500);
  };

  render() {
    let error;
    if (this.state.error) {
      error = <Text color="red" marginBottom="16px">{this.state.error}</Text>;
    }

    return (
      <View width="596px" background="#efefef">
        <Dialog
          title="Confirmation code"
          message="A confirmation code has been sent to your email. Enter the code you received by email below."
          icon={this.renderIcon()}
          buttons={[
            <Button
              disabled={this.state.loading}
            >
              Cancel
            </Button>,
            <Button
              color="blue"
              onEnter={this.submit}
              onClick={this.submit}
              disabled={this.state.pin.length !== 4 || this.state.loading}
            >
              Submit
            </Button>
          ]}
          horizontalAlignment="center"
        >
          {error}
          <ProgressCircle
            hidden={!this.state.loading}
            style={{ position: 'absolute', bottom: '46px', marginLeft: '-120px' }}
          />
          <Pin length={4} marginBottom="16px" onChange={pin => this.setState({ pin })}/>
          <Text>Enter the four digit security code</Text>
        </Dialog>
      </View>
    );
  }

  renderIcon() {
    return (
      <img
        src=""
        width="52"
        height="52"
      />
    );
  }
}

export default PinDialog;
